<style scoped>
  .tip{line-height: 20px;text-align: center;color:#999;font-size: 12px;}
  .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
  .remark{width:100%;border:0;height: 50px;line-height: 50px;resize : none;}
  .checkbox{padding: 10px 15px;}
  .checkbox i{width:26px;}
  .mark{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
</style>
<template>
  <wrap title="学校信息">
    <div slot="page">
      <div class="fill-box margin-bottom">
        <div class="light-bg">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">学校名称</span>
            <input class="font-15 content" v-model="school.graduateSchool" type="text" placeholder="请填写学校名称">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">学院名称</span>
            <input class="font-15 content" v-model="school.college" type="text" placeholder="请填写学院名称">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">就读专业</span>
            <input class="font-15 content" v-model="school.major" type="text" placeholder="请填写就读专业">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">入学年份</span>
            <span class="font-15 fill-data" :class="school.schoolInYearName?'content':'placeholder'" @click="showSchoolInYear=!showSchoolInYear">
              {{school.schoolInYearName?school.schoolInYearName:'请选择'}}
              <i class="fa fa-angle-right font-24"></i> 
            </span> 
          </div>
        </div>
        <div class="fill-group light-bg">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">住宿地址</span>
            <span class="font-15 fill-data" :class="school.schoolCountyCode?'content':'placeholder'" @click="showAddress=!showAddress">
              {{school.schoolCountyName?school.schoolProvinceName+school.schoolCityName+school.schoolCountyName:'请选择'}}
              <i class="fa fa-angle-right font-24"></i> 
            </span> 
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">详细地址</span>
            <input class="font-15 content" v-model="school.schoolAddress" type="text" placeholder="请填写详细地址">
          </div>
        </div> 
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
      <cube-picker :show="showSchoolInYear" :data="showSchoolInYearList" @select="selectSchoolInYear" @cancel="showSchoolInYear = false"></cube-picker>
      <show-city :show="showAddress" @cancel="showAddress = false" @select="selectAddress"></show-city>
    </div>
  </wrap>
</template>
<script>
  import wrap from '../../components/wrap.vue'
  import cubePicker from '../../components/cubePicker.vue'
  import showCity from '../../components/showCity.vue'
  export default {
    components: {wrap, cubePicker, showCity},
    data () {
      return {
        nextEnable: false,
        showSchoolInYear: false,
        showAddress: false,
        province: [],
        cty: [],
        county: [],
        showSchoolInYearList: [],
        school: {
          college: '',
          graduateSchool: '',
          major: '',
          schoolInYear: '',
          schoolInYearName: '',
          schoolCountyCode: '',
          schoolCountyName: '',
          schoolCityCode: '',
          schoolCityName: '',
          schoolProvinceCode: '',
          schoolProvinceName: '',
          schoolAddress: ''
        }
      }
    },
    computed: {
      canSelectContact () {
        /* eslint-disable no-undef */
        return (this.$store.state.inAPP && jiujiJsBridge && jiujiJsBridge.getContacts)
      }
    },
    created () {
      const self = this
      self.getSchoolInfo()
      self.$watch('school', () => {
        if (self.school.college && self.school.graduateSchool && self.school.major && parseInt(self.school.schoolInYear) && parseInt(self.school.schoolCountyCode) && self.school.schoolAddress) {
          self.nextEnable = true
        } else {
          self.nextEnable = false
        }
      }, {deep: true})
    },
    methods: {
      selectAddress (data) {
        const self = this
        self.school.schoolProvinceCode = data.value[0]
        self.school.schoolProvinceName = data.label[0]
        self.school.schoolCityCode = data.value[1]
        self.school.schoolCityName = data.label[1]
        self.school.schoolCountyCode = data.value[2]
        self.school.schoolCountyName = data.label[2]
        self.showAddress = false
      },
      selectSchoolInYear (data) {
        const self = this
        self.school.schoolInYearName = data.label[0]
        self.school.schoolInYear = data.value[0]
        self.showSchoolInYear = false
      },
      getSchoolInfo () {
        const self = this
        this.$api.fill.getSchoolInfo().then(res => {
          if (res.code === 0) {
            let data = res.data
            if (data) {
              self.school = data
              self.showSchoolInYearList = self.school.schoolInYears
              delete self.school.schoolInYears
            }
          } else {
            this.$Toast(res.msg)
          }
        })
      },
      next () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        self.$api.fill.saveSchoolInfo(self.school).then(res => {
          if (res.code === 0) {
            // self.$router.push('/detail/addition/')
            self.$router.go(-1)
          } else {
            self.$MessageBox.alert(res.userMsg)
          }
        })
      }
    }
  }
</script>
      